<template>
  <!--上-->
  <el-row :gutter="20">
    <el-col :span="6">
      <el-card>
        <div class="card-header">
          <span>总销售额</span>
          <el-icon>
            <Setting/>
          </el-icon>
        </div>
        <div class="card-content">¥ 12306</div>
        <div class="card-charts">周同比&nbsp;&nbsp;56.67%</div>
        <div class="card-footer">日销售额 ¥4699</div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <div class="card-header">
          <span>总销售额</span>
          <el-icon>
            <Setting/>
          </el-icon>
        </div>
        <div class="card-content">¥ 12306</div>
        <div class="card-charts" ref="lineCharts"></div>
        <div class="card-footer">日销售额 ¥4699</div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <div class="card-header">
          <span>总销售额</span>
          <el-tooltip content="点击设置" placement="bottom" effect="light">
            <el-icon>
              <Setting/>
            </el-icon>
          </el-tooltip>
        </div>
        <div class="card-content">¥ 12306</div>
        <div class="card-charts" ref="barCharts1"></div>
        <div class="card-footer">日销售额 ¥4699</div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <div class="card-header">
          <span>总销售额</span>
          <el-icon>
            <Setting/>
          </el-icon>
        </div>
        <div class="card-content">80.6 %</div>
        <div class="card-charts" ref="barCharts2"></div>
        <div class="card-footer">日销售额 ¥4699</div>
      </el-card>
    </el-col>
  </el-row>
  <!--中-->
  <el-row style="margin-top: 20px">
    <el-col>
      <el-card>
        <!--卡片头-->
        <template #header>
          <div class="clearfix">
            <!--头部左侧-->
            <el-tabs class="clearfix-tabs" v-model="activeName">
              <el-tab-pane label="销售额" name="1"></el-tab-pane>
              <el-tab-pane label="访问量" name="2"></el-tab-pane>
            </el-tabs>
            <!--头部右侧-->
            <div class="clearfix-right">
              <span @click="setToday">今日</span>
              <span @click="setWeek">本周</span>
              <span @click="setMonth">本月</span>
              <span @click="setYear">本年</span>
              <el-date-picker
                  v-model="showData"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="YYYY/MM/DD"
                  value-format="YYYY-MM-DD"
              />
            </div>
          </div>
        </template>
        <el-row :gutter="30">
          <el-col :span="16">
            <div class="barCharts3" ref="barCharts3">333</div>
          </el-col>
          <el-col :span="8">
            <span>门店{{ title }}排名</span>
            <ul>
              <li>
                <span class="span1">1</span>
                <span class="span2">肯德基</span>
                <span>323,234</span>
              </li>
              <li>
                <span class="span1">2</span>
                <span class="span2">肯德基</span>
                <span>323,234</span>
              </li>
              <li>
                <span class="span1">3</span>
                <span class="span2">肯德基</span>
                <span>323,234</span>
              </li>
              <li>
                <span class="span1">4</span>
                <span class="span2">肯德基</span>
                <span>323,234</span>
              </li>
              <li>
                <span class="span1">5</span>
                <span class="span2">肯德基</span>
                <span>323,234</span>
              </li>
              <li>
                <span class="span1">6</span>
                <span class="span2">肯德基</span>
                <span>323,234</span>
              </li>
              <li>
                <span class="span1">7</span>
                <span class="span2">肯德基</span>
                <span>323,234</span>
              </li>
            </ul>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
  <!--下-->
  <el-row style="margin-top: 20px" :gutter="20" >
    <el-col :span="12">
      <el-card>
        <!--卡片头-->
        <template #header>
          <div class="search-header">
            <!--头部左侧-->
            <span>111</span>
            <!--头部右侧-->
            <el-dropdown>
              <span><el-icon><Setting/></el-icon></span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>Action 1</el-dropdown-item>
                  <el-dropdown-item>Action 2</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
        <!--卡片中-->
        <el-row :gutter="10">
          <!--左-->
          <el-col :span="12">
            <div><span>搜索用户数</span><i>...</i></div>
            <div><span>12321</span><span>17.23%</span></div>
            <div class="middle-footer" ref="lineCharts2"></div>
          </el-col>
          <!--右-->
          <el-col :span="12">
            右边
          </el-col>
        </el-row>
        <!--卡片下-->
        <el-table border>
          <el-table-column label="排名" type="index"></el-table-column>
          <el-table-column label="搜索关键字"></el-table-column>
          <el-table-column label="用户数" sortable></el-table-column>
          <el-table-column label="周涨幅" sortable></el-table-column>
        </el-table>
        <el-pagination
            class="pagination"
            small
            pager-count="5"
            :current-page="page"
            :page-size="limit"
            :page-sizes="[3, 5, 7]"
            layout="prev, pager, next"
            :total="200">
        </el-pagination>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <!--卡片头-->
        <template #header>
          <div class="category-header">
            <!--头部左侧-->
            <span>销售额类别占比</span>
            <!--头部右侧-->
            <div>
              <el-radio-group v-model="clickValue">
                <el-radio-button label="全部渠道"/>
                <el-radio-button label="线上"/>
                <el-radio-button label="门店"/>
              </el-radio-group>
            </div>
          </div>
        </template>
        <!--卡片中-->
        <div class="category-middle" ref="pieCharts"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import echarts from 'echarts'
import dayjs from "dayjs";
import {reqMonthList} from "../../api/mockRequests";

export default {
  name: "DashBoard",
  data() {
    return {
      // 标签页的激活
      activeName: '1',
      // 柱状图3的实例
      d: null,
      // 日期选择器(日历)的数据
      showData: [],
      // 激活的按钮
      clickValue: '线上',
      // mock回来的数据
      listState: {}
    }
  },
  mounted() {
    this.getLineEcharts()
    this.getBarEcharts1()
    this.getBarEcharts2()
    this.getBarEcharts3()
    this.getLineEcharts2()
    this.setPieEcharts()
    this.getMonthList()
  },
  methods: {
    // 获得折线图
    getLineEcharts() {
      // 初始化echarts实例
      let a = echarts.init(this.$refs.lineCharts)
      // 配置数据
      a.setOption({
        xAxis: {
          // 隐藏x轴
          show: false,
          type: 'category'
        },
        yAxis: {
          show: false
        },
        // 系列
        series: [
          {
            type: 'line',
            // 数据
            data: [20, 35, 70, 40, 56, 9],
            // 拐点的样式的设置
            itemStyle: {
              opacity: 0.8,
              // 拐点颜色
              color: 'orange'
            },
            // 线条的颜色
            lineStyle: {
              color: 'orange'
            },
            // 折现区域的填充颜色(此处使用渐变色)
            areaStyle: {
              color: {
                // 颜色：渐变
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "orange",// 0%处的颜色
                  },
                  {
                    offset: 1,
                    color: "#fff",// 100%处的颜色
                  }
                ],
                global: false,//缺省为false
              }
            },
            // 折线是否平滑
            smooth: true
          }
        ],
        // 布局调整
        grid: {
          left: 0,
          right: 0,
          top: 5,
          bottom: 0
        },
        // 鼠标悬浮提示
        tooltip: {}
      })
    },
    // 获得柱状图1
    getBarEcharts1() {
      // 初始化echarts实例
      let b = echarts.init(this.$refs.barCharts1)
      // 配置数据
      b.setOption({
        xAxis: {
          // 隐藏x轴
          show: false,
          // 均分
          type: 'category'
        },
        yAxis: {
          show: false
        },
        // 系列
        series: [
          {
            type: 'bar',
            // 数据
            data: [20, 35, 70, 40, 56, 9, 30, 22, 99, 55, 120],
            // 柱状图颜色
            color: 'purple'
          }
        ],
        // 布局调整
        grid: {
          left: 0,
          right: 0,
          top: 5,
          bottom: 0
        },
        // 鼠标悬浮提示
        tooltip: {}
      })
    },
    // 获得柱状图2
    getBarEcharts2() {
      // 初始化echarts实例
      let c = echarts.init(this.$refs.barCharts2)
      // 配置数据
      c.setOption({
        xAxis: {
          // 隐藏x轴
          show: false,
          // 最小值和最大值
          min: 0,
          max: 100
        },
        yAxis: {
          show: false,
          // 均分
          type: 'category'
        },
        // 系列
        series: [
          {
            type: 'bar',
            // 数据
            data: [80.6],
            // 柱状图颜色
            color: 'yellowgreen',
            // 柱状图的宽度
            barWidth: 20,
            // 是否显示背景颜色
            showBackground: true,
            // 设置背景颜色
            backgroundStyle: {
              color: '#eee'
            }
          }
        ],
        // 布局调整
        grid: {
          left: 0,
          right: 0,
          top: 5,
          bottom: 0
        },
        // 鼠标悬浮提示
        tooltip: {},
        // 文本设置
        label: {
          show: true,
          formatter: '|',
          position: 'right',
          fontSize: 18
        }
      })
    },
    // 获得柱状图3
    getBarEcharts3() {
      // 初始化echarts实例
      this.d = echarts.init(this.$refs.barCharts3)
      // 配置数据
      this.d.setOption({
        title: {
          text: '销售额趋势'
        },
        // 鼠标悬浮提示
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // 布局调整
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        xAxis: {
          // 显示x轴(默认即为true)
          show: true,
          // 均分
          type: 'category',
          // x轴坐标内容
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: [
          {
            type: 'value'
          }
        ],
        // 系列
        series: [
          {
            type: 'bar',
            //
            barWidth: '50%',
            // 数据
            data: [20, 35, 70, 40, 56, 9, 30, 22, 99, 55, 120, 80],
            // 柱状图颜色
            color: 'green'
          }
        ],
      })
    },
    // 获得折线图2
    getLineEcharts2() {
      // 初始化echarts实例
      let e = echarts.init(this.$refs.lineCharts2)
      // 配置数据
      e.setOption({
        xAxis: {
          // 隐藏x轴
          show: false,
          type: 'category'
        },
        yAxis: {
          show: false
        },
        // 系列
        series: [
          {
            type: 'line',
            // 数据
            data: [20, 35, 70, 40, 56, 9],
            // 拐点的样式的设置
            itemStyle: {
              opacity: 0,
              // 拐点颜色
              color: 'blue'
            },
            // 线条的颜色
            lineStyle: {
              color: 'blue'
            },
            // 折现区域的填充颜色(此处使用渐变色)
            areaStyle: {
              color: {
                // 颜色：渐变
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "blue",// 0%处的颜色
                  },
                  {
                    offset: 1,
                    color: "#fff",// 100%处的颜色
                  }
                ],
                global: false,//缺省为false
              }
            },
            // 折线是否平滑
            smooth: true
          }
        ],
        // 布局调整
        grid: {
          left: 0,
          right: 0,
          top: 5,
          bottom: 0
        },
        // 鼠标悬浮提示
        tooltip: {}
      })
    },
    // 获得本日日期，并赋值给日期选择器
    setToday() {
      const today = dayjs().format('YYYY-MM-DD')
      console.log(today)
      this.showData = [today, today]
    },
    // 获得本周日期，并赋值给日期选择器
    setWeek() {
      const startWeek = dayjs().day(1).format('YYYY-MM-DD')
      const endWeek = dayjs().day(7).format('YYYY-MM-DD')
      // console.log(startWeek, endWeek)
      this.showData = [startWeek, endWeek]
    },
    // 获得本月日期，并赋值给日期选择器
    setMonth() {
      const startMonthDay = dayjs().startOf('month').format('YYYY-MM-DD')
      const endtMonthDay = dayjs().endOf('month').format('YYYY-MM-DD')
      this.showData = [startMonthDay, endtMonthDay]
    },
    // 获得本年日期，并赋值给日期选择器
    setYear() {
      const startYearDay = dayjs().startOf('year').format('YYYY-MM-DD')
      const endtYearDay = dayjs().endOf('year').format('YYYY-MM-DD')
      this.showData = [startYearDay, endtYearDay]
    },
    // 获得饼状图
    setPieEcharts() {
      // 初始化echarts实例
      let f = echarts.init(this.$refs.pieCharts)
      // 配置数据
      f.setOption({
        // 饼状图的标题
        title: {
          text: '视频广告',
          subtext: 1048,
          // 移位到正中间
          top: 'center',
          left: 'center',
        },
        tooltip: {
          trigger: 'item'
        },
        color: ['#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956'],
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 8,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: true,
              position: 'outside'
            },
            labelLine: {
              show: true
            },
            data: [
              {value: 1048, name: '视频广告'},
              {value: 735, name: '搜索引擎'},
              {value: 580, name: '直接访问'},
              {value: 484, name: '邮件营销'},
              {value: 300, name: '联盟广告'}
            ]
          }
        ]
      })
      f.on('mouseover', (params) => {
        // 获取鼠标悬浮上的项的数据
        const hoverItemName = params.data.name
        const hoverItemValue = params.data.Value
        // 重新设置标题
        f.setOption({
          title: {
            text: hoverItemName,
            name: hoverItemValue
          }
        })
      });
    },
    // 请求mock数据
    async getMonthList() {
      let result = await reqMonthList()
      // console.log(result)
      if (result.code == 200) {
        this.listState = result.data
      }
    }
  },
  computed: {
    // 标题
    title() {
      return this.activeName == '1' ? '销售额趋势' : '访问量趋势'
    },
  },
  watch: {
    // 监听title的切换
    title() {
      // 标签页切换时，再次请求数据
      // this.getMonthList()
      // 重新修改对应柱状图的配置数据
      this.d.setOption({
        // 此处，哪个标签页激活，就显示哪个标题，跟请求无关
        title: {
          text: this.title
        },
        // 根据mock返回的数据，切换x轴的显示内容
        xAxis: {
          data: this.title == '销售额趋势' ? this.listState.orderFullYearAxis : this.listState.userFullYearAxis
        },
        // 根据mock返回的数据，切换y轴的显示内容
        series: [
          {
            type: 'bar',
            barWidth: '50%',
            // y轴数据
            data: this.title == '销售额趋势' ? this.listState.userFullYear : this.listState.orderFullYear,
            color: 'green'
          }
        ],
      })
    }
  }
}
</script>

<style scoped>
/*修改el-card自带的边距*/
/deep/ .el-card__body {
  padding: 10px !important;
}

.el-card:hover {
  transform: translate(0, -5px);
  transition: all .3s;
}

.card-header {
  display: flex;
  justify-content: space-between;
  color: #666;
}

.card-content {
  font-size: 30px;
  padding: 10px 0;
}

.card-charts {
  font-size: 14px;
  padding-bottom: 10px;
  height: 50px;
}

.card-footer {
  font-size: 14px;
  border-top: 1px solid #eee;
  padding-top: 10px;
}

/deep/ .el-card__header {
  border-bottom: none;
}

.clearfix {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.clearfix-tabs {
  width: 100%;
}

.clearfix-right {
  position: absolute;
  right: 0;
}

.clearfix-right span {
  margin: 0 15px;
}

/deep/ .el-range-editor.el-input__inner {
  width: 250px;
}

.barCharts3 {
  width: 100%;
  height: 300px;
}

ul {
  list-style: none;
  width: 100%;
  height: 250px;
  padding: 0;
  margin-top: 30px;
}

ul li {
  height: 8%;
  display: flex;
  margin: 15px 0;
}

ul li:hover {
  background: rgb(223, 223, 223);
}

ul .span1 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(255, 198, 30);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 50px;
}

ul .span2 {
  margin-right: 50px;
}

/**************************************************************/
.search-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
}

.middle-footer {
  height: 50px;
}

.pagination {
  float: right;
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
}

.category-middle {
  height: 221px;
}

</style>